<template>
  <div class="dashboard-container car-models customer-list-box">
    <!-- 添加弹窗 -->
    <el-dialog
      width="40%"
      :title="title"
      :visible="dialogFormVisible"
      @close="close"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="addForm.name"
            placeholder="请输入车型名称"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="addForm.allowableLoad"
            placeholder="请输入车型载重"
            autocomplete="off"
          >
            <span
              slot="append"
              style="margin-right:10px"
            >吨</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="addForm.allowableVolume"
            placeholder="请输入车型体积"
            autocomplete="off"
          >
            <span
              slot="append"
              style="margin-right:1px"
            >立方米</span>
          </el-input>

        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="addForm.measureLong"
            placeholder="请输入"
            autocomplete="off"
          >
            <span
              slot="append"
              style="margin-right:10px"
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="addForm.measureWidth"
            placeholder="请输入"
            autocomplete="off"
          >
            <span
              slot="append"
              style="margin-right:10px"
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="addForm.measureHigh"
            placeholder="请输入"
            autocomplete="off"
          >
            <span
              slot="append"
              style="margin-right:10px"
            >米</span>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          text-align:center
          type="primary"
          @click="add"
        >确定</el-button>
        <el-button
          text-align:center
          @click="close"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { detail, update, add } from '@/api/transit'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: 'CarModelsAdd',
      title: '新增车型',
      addForm: {
        name: '', // 车辆类型
        allowableVolume: '', // 准载体积
        allowableLoad: '', // 准载重量
        measureHigh: '', // 高
        measureLong: '', // 长
        measureWidth: '', // 宽
        goodsTypes: []
      },
      rules: {
        name: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 详情
    async detail(id) {
      this.title = '编辑车型'
      const { data } = await detail(id)
      // console.log(data)
      this.addForm = data
      // console.log(this.addForm)
    },
    // 点击确认
    add() {
      console.log(this.$refs.addForm)
      this.$refs.addForm.validate(async(isOk) => {
        if (isOk) {
          if (this.addForm.id) {
            await update(this.addForm.id, this.addForm)
            this.$message.success('修改成功')
          } else {
            await add(this.addForm)
            this.$message.success('添加成功')
          }
        }
        this.close()
        this.$emit('update')
      })
    },
    close() {
      // 清空
      this.$refs.addForm.resetFields()
      this.$emit('update:dialogFormVisible', false)
    }
  }
}

</script>
